import React from 'react';

const LogModule = () => {
  return (
    <div className="log-module">
      <h3>日志记录</h3>
      <div className="log-content" style={{
        height: '300px',
        overflow: 'auto',
        backgroundColor: '#222',
        color: '#88ff88',
        padding: '10px',
        borderRadius: '5px',
        fontFamily: 'monospace',
        fontSize: '16px'
      }}>
        <div className="log-entry" style={{ marginBottom: '8px', lineHeight: '1.5' }}>[2023-10-01 10:15:23] 应用启动</div>
        <div className="log-entry" style={{ marginBottom: '8px', lineHeight: '1.5' }}>[2023-10-01 10:15:25] 初始化系统服务</div>
        <div className="log-entry" style={{ marginBottom: '8px', lineHeight: '1.5' }}>[2023-10-01 10:15:28] 连接到设备</div>
        <div className="log-entry" style={{ marginBottom: '8px', lineHeight: '1.5' }}>[2023-10-01 10:16:02] 检测到用户操作</div>
        <div className="log-entry" style={{ marginBottom: '8px', lineHeight: '1.5' }}>[2023-10-01 10:17:15] 后台任务运行完成</div>
        <div className="log-entry" style={{ marginBottom: '8px', lineHeight: '1.5' }}>[2023-10-01 10:19:33] 资源使用率: CPU 12%, 内存 256MB</div>
        <div className="log-entry" style={{ marginBottom: '8px', lineHeight: '1.5' }}>[2023-10-01 10:22:47] 接收到系统通知</div>
      </div>
      <div className="log-controls" style={{ marginTop: '10px' }}>
        <button style={buttonStyle}>刷新日志</button>
        <button style={buttonStyle}>清除日志</button>
        <button style={buttonStyle}>导出日志</button>
      </div>
    </div>
  );
};

const buttonStyle = {
  backgroundColor: '#2a2a2a',
  color: 'white',
  border: 'none',
  padding: '5px 10px',
  margin: '0 5px',
  borderRadius: '4px',
  cursor: 'pointer'
};

export default LogModule; 